<template>
  <div class="left_1_content">
    <div class="title">舆情统计(条)</div>
    <div class="progress">
      <div class="progress-item">
        <span>实时数据</span>
        <div class="progress-bar-wrap">
          <div class="progress-bar" :style="'width:' + bar"></div>
        </div>
        <span>{{ cutrent }}</span>
      </div>
      <div class="progress-item">
        <span>敏感数据</span>
        <div class="progress-bar-wrap">
          <div class="progress-bar1"></div>
        </div>
        <span>123456</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, Ref } from "vue";
const total: Ref<number> = ref(100);
const cutrent: Ref<number> = ref(60);
let bar: string = (cutrent.value / total.value) * 100 + "%";
</script>

<style lang="scss" scoped>
.title {
  color: #fff;
  width: 2.5625rem;
  height: 0.4896rem;
  text-align: center;
  line-height: 0.4896rem;
  font-size: .1875rem;
}

.progress {
  .progress-item {
    width: 4.5833rem;
    height: 0.5208rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      display: block;
      width: 0.9375rem;
      margin: 0 0.1042rem;
      color: #fff;
      font-size: .1563rem;
    }

    .progress-bar-wrap {
      width: 2.5rem;
      height: 0.1458rem;
      background: #031f42;

      .progress-bar {
        background: url("../../assets/images/bar-bg01.png") no-repeat;
        width: 90%;
        height: 0.125rem;
      }

      .progress-bar1 {
        background: url("../../assets/images/bar-bg02.png") no-repeat;
        width: 90%;
        height: 0.125rem;
      }
    }
  }
}
</style>